/* CSS Document */
body { max-width: 1920px; margin: 0 auto; padding: 0; font-family: 'Microsoft YaHei',Arial; -webkit-font-smoothing:antialiased; padding-top: 90px; }
* { margin: 0; padding: 0; }
a { text-decoration: none; }
ul, li { list-style: none; }
li { list-style: none; float: left; }
img { display: block; max-width: 100%; border: none;height:auto; }
.clear { clear: both; }
.left, lt { float: left; }
.right, rt { float: right; }
.container { width: 1200px; margin: 0 auto; box-sizing: border-box; }

/* item������ʽ */
.transition { transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; }
.Item .pic { overflow: hidden; }
.Item .pic img { width: 100%; transition: all 0.3s linear; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; }
.Item a:hover .pic img { transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.1s; -o-transition: all 0.3s; }
.Item a:hover h3 { color: #2091BF; }

/* Header ��ʽbegin */
#Header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 98; }
#Header .nav-bg { position: absolute; left: 0; top: 90px; width: 100%; height: 200px; display: none; z-index: 996; }
#Header .left { float: left; width: 25%; margin-top:1%}
#Header .right { float: right; width: 75%; }
#Header .right .boxR { float: right; }
#Header .right .nav { float: right; }
#Header .container { }
#Header .logo { padding: 15px 0; }
#Header .nav li { float: left; }
#Header .nav li a { margin: 0 5px; display: block; position: relative; font-size: 14px; color: #000; line-height: 90px; background: #fff; overflow: hidden; height: 90px; }
#Header .nav li a span { display: block; font-size: 14px; color: #fff; line-height: 90px; background: #2091BF; padding: 0 20px; box-sizing: border-box; position: absolute; left: 0; top: -90px; width: 100%; transition: all 0.3s; }
#Header .nav li a abbr { display: block; font-size: 14px; color: #000; line-height: 90px; background: #fff; padding: 0 20px; box-sizing: border-box; position: relative; left: 0; top: 0px; width: 100%; transition: all 0.3s; }
#Header .nav li:hover a span { top: 0; }
#Header .nav li:hover a abbr { top: 90px; }
#Header .nav li.selected a span { top: 0; }
#Header .nav li.selected a abbr { top: 90px; }
#Header .main .nav_down { position: absolute; text-align: right; left: 0; top: 90px; width: 100%; z-index: 999; background: #fff; display: none; border-top: 1px solid #e8e8e8; box-sizing: border-box; box-shadow: 0 2px 3px 1px #eee; }
#Header .main .Down-li-row li { float: none; display: inline-block; }
#Header .main .Down-li-row li a { line-height: 80px; height: auto; padding: 0 20px; margin: 0 10px; }
#Header .main .Down-li-row li:hover a { color: #2091BF; }
#product-nav { padding: 30px; box-sizing: border-box; }
#product-nav li { float: left; width: 25%; }
#product-nav .li-box { }
#product-nav .li-box .lt { float: left; width: 48%; }
#product-nav .li-box .rt { float: right; width: 52%; }
#Header .nav li .nav_down .li-box .nav-pic { margin: 0 auto; text-align: center; padding: 0 20px; }
#Header .nav li .nav_down .li-box .nav-pic img { margin: 0 auto; }
#Header .nav li .nav_down .li-box { border-right: 1px solid #e0e0e0; }
#Header .nav li .nav_down .li-box a { line-height: 30px; height: auto; text-align: left; }
#Header .nav li .nav_down .li-box dt a { font-size: 16px; color: #2091BF; text-align: left; }
#Header .nav li .nav_down .li-box dd a { font-size: 14px; color: #333; line-height: 26px; text-align: left; }
#Header .nav li .nav_down .li-box dd:hover a { color: #2091BF; }
#Header .nav li .nav_down li:last-child .li-box { border: none; }
#Header .nav li.nav-sub-Product .nav_down .li-box dt a { color: #2091BF; }
#About-nav { padding: 30px; }
#About-nav .sub-nav-left { float: left; width: 60%; }
#About-nav .sub-nav-right { float: right; right: 40%; }
#About-nav .li-box { }
#Header .nav li #About-nav li { float: left; width: 33.33%; }
#Header .nav li #About-nav .li-box { padding: 0 50px; height: 186px; }




#Header .main .boxR { padding: 0 10px; }
#Header .main .boxR .search { float: right; padding: 30px 10px; position: relative; }
#Header .main .boxR .search .mens-but { cursor: pointer; width: 30px; box-sizing: border-box; height: 30px; font-size: 18px; padding: 2px 0; }
#form_s { position: absolute; top: 90px; right: 0; width: 300px; display: none; z-index: 99; background: #fff; padding: 10px; box-sizing: border-box; }
#Header .main .boxR .language { float: left; margin-left: 10px; position: relative; }
#Header .main .boxR .search input { outline: none; border: 1px solid #2091BF; cursor: pointer; display: block; float: left; padding: 0 10px; background: none; font-size: 14px; color: #333; line-height: 40px; height: 40px; box-sizing: border-box; }
#Header .main .boxR .search input.opinst { width: 40px; box-sizing: border-box; border-left: none; border-bottom-right-radius: 5px; border-top-right-radius: 5px; background: url('../images/icon_search.png') no-repeat center center; }
#Header .main .boxR .search input#KeyWord { width: 238px; box-sizing: border-box; border-right: none; border-bottom-left-radius: 5px; border-top-left-radius: 5px; }
#Header .main .boxR .language a { padding: 30px 0; display: block; }
#Header .main .boxR .language span { display: inline-block; font-size: 14px; color: #000; line-height: 30px; font-weight: 100; float: left; }
#Header .main .boxR .language span.icon-lang { width: 35px; height: 30px; display: inline-block; display: none; }
#Header .main .boxR .language span.icon-down { width: 0; height: 0; display: block; margin: 0 20px 0 5px; }
#Header .main .boxR .language .down { background: #fff; position: absolute; top: 90px; left: 0; display: none; width: 100%; z-index: 99; }
#Header .main .boxR .language .down a { font-size: 14px; line-height: 40px; padding: 0; display: block; color: #333; text-align: center; }
#Header .main .boxR .language .down a.selected { background: #2091BF; color: #fff; }
#Header .main .boxR .language .down a:hover { background: #2091BF; color: #fff; }


/*�ֻ���˵���ť���Ч����ʽ*/
.menu-bar { position: absolute; display: none; right: 20px; top: 50%; margin-top: -12px; -webkit-transition: -webkit-transform .25s ease-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; transition: transform .25s ease-out; transition: top .25s ease-in-out; }
.menu-bar .btn-menu { display: block; box-sizing: border-box; width: 30px; text-align: center; text-decoration: none; border-bottom: none; }
.menu-bar .btn-menu .menu-line { display: block; width: 30px; height: 3px; margin: 8px auto; border-radius: 2px; background-color: #2091BF; }
.menu-bar .btn-menu .menu-line.menu-line-top { margin-top: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-top { width: 36px; -webkit-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); -ms-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); transform: rotate(45deg) translate(-1px, -1px) scaleX(1); background-color: #2091BF; }
.menu-bar .btn-menu .menu-line.menu-line-middle { -webkit-transition: opacity .25s ease-out, background-color .25s ease-out; transition: opacity .25s ease-out, background-color .25s ease-out; opacity: 1; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-middle { opacity: 0; }
.menu-bar .btn-menu .menu-line.menu-line-bottom { margin-bottom: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-bottom { width: 36px; -webkit-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); -ms-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); background-color: #2091BF; }
/* Header ��ʽend */


/* Footer ��ʽbegin */
#Footer { }
#Footer .main { background: #2091BF; }
#Footer .main .left { float: left; width: 82%; border-right: 2px solid #2e9899; box-sizing: border-box; }
#Footer .main .right { float: right; width: 15%; }
#Footer .main .boxM { padding: 40px 0; }
#Footer .main .f-nav { box-sizing: border-box; }
#Footer .main .f-nav ul { width: 100%; }
#Footer .main .f-nav li { float: left; width: 20%; }
#Footer .main .f-nav dt { font-size: 14px; color: #fff; font-weight: bold; line-height: 20px; margin-bottom: 20px; }
#Footer .main .f-nav dd a { font-size: 12px; color: #f4f4f4; line-height: 26px; }
#Footer .main .f-nav dd:hover a { color: #fff; text-shadow: 0 0 3px 1px #ccc; }
#Footer .main .cont { text-align: center; float: right; }
#Footer .main .cont .qcrod { position: relative; width: 100px; height: 100px; overflow: hidden; margin: 0 auto; }
#Footer .main .cont .qcrod img { width: 100%; }
#Footer .main .cont h3 { font-size: 14px; color: #fff; line-height: 40px; font-weight: 500; }
#Footer .Copyright { text-align: center; background: #006699; }
#Footer .Copyright p { display: inline-block; font-size: 12px; color: #fff; line-height: 60px; }
#Footer .Copyright a { display: inline-block; font-size: 12px; color: #fff; line-height: 60px; margin: 0 10px; }
.f-tool { float: right; text-align: center; width: 100px; }
.f-tool li { display: inline-block; margin: 10px 0px 10px 10px; }
.f-tool li a { width: 30px; height: 30px; display: block; border-radius: 2px; background: url('../images/sprite_02.png') no-repeat; }
.f-tool li .wb { background-position: 0px -3px; }
.f-tool li .fb { background-position: -78px -3px; }
/* Footer ��ʽend */


@media (min-width: 1200px) {
}

@media (min-width: 768px) {
}

@media (max-width: 1500px) {
}

@media (max-width: 1200px) {
    .container { margin: 0 auto; width: 100%; }
    #Footer .main { padding: 0 10px; }
}

@media (max-width: 1025px) {
    body { padding-top: 80px; }
    #Header { }
    .menu-bar { display: block; }
    #Header .left { width: 30%; }
    #Header .right { width: 65%; padding-right: 50px; box-sizing: border-box; }
    #Header .logo { padding: 10px; }
    #Header .main .boxR .language a { padding: 25px 0; }
    #Header .main .boxR .search { padding: 25px 10px; }
    #Header .right .nav { position: fixed; left: 0; top: 80px; width: 100%; z-index: 99; display: none; height: 100%; }
    #Header .right .nav ul { position: relative; overflow: scroll; height: 100%; width: 100%; display: block; padding-bottom: 100px; box-sizing: border-box; }
    #Header .right .nav ul ul { padding: 0; }
    #form_s { position: fixed; left: 0; right: auto; margin-left: 0; top: 80px; width: 100%; box-sizing: border-box; height: 60px; padding: 10px; background: #2091BF; z-index: 99; }
    #Header .main .boxR .search input#KeyWord { font-size: 14px; color: #333; line-height: 40px; border: none; outline: none; float: left; width: 90%; padding: 0 10px; box-sizing: border-box; background: #fff; }
    #Header .main .boxR .search input.opinst { width: 10%; float: left; height: 40px; border: none; font-size: 0; cursor: pointer; outline: none; background: url(../images/icon_search.png) no-repeat center center #fff; }
    #Header .main .boxR .language .down { top: 80px; }
    #Header .right .nav li { float: none; width: 100%; }
    #Header .right .nav li a { margin: 0; line-height: 50px; height: 50px; }
    #Header .right .nav li a span { line-height: 50px; font-size: 16px; }
    #Header .right .nav li a abbr { line-height: 50px; font-size: 16px; }
    #Header .main .nav_down { position: relative; top: 0; box-shadow: none; padding: 10px 30px; text-align: left; }
    #Header .main .Down-li-row li a { padding: 0; color: #2091BF; font-size: 16px; }
    #About-nav .sub-nav-left { width: 100%; }
    #About-nav .sub-nav-right { display: none; }
    #Header .right .nav #product-nav li { width: 25%; float: left; }
    #Header .nav li #About-nav .li-box { padding: 0; text-align: left; }
    #Header .nav li .nav_down .li-box { border: none; }
    #Header .nav li .nav_down .li-box .nav-pic { display: none; }
    #product-nav .li-box .rt { width: 100%; float: none; }

    #Footer .main { padding: 0 10px; }
    #Footer .main .left { width: 75%; }
    #Footer .main .f-nav dt { }
    #Footer .main .f-nav dd a { }
}

@media (max-width: 800px) {
}

@media (max-width: 640px) {
    body { padding-top: 60px; }
    #Header .logo img { width: auto; max-width: 200%; height: auto; margin-top:8%;}
    #Header .main .boxR .language a { padding: 15px 0; }
    #Header .main .boxR .search { padding: 15px 10px; }
    #Header .right .nav { top: 60px; }
    #form_s { top: 60px; }
    #Header .main .boxR .language .down { top: 60px; width: 100px; left: -50px; }
    #Header .main .boxR .language span.lang { display: none; }
    #Header .main .boxR .language span.icon-lang { display: block; width: 20px; }
    #Header .main .boxR .language span.icon-down { display: none; }

    #Footer .main .left { width: 100%; float: none; border: none; }
    #Footer .main .right { width: 100%; float: none; }
    #Footer .main .cont { float: none; margin: 20px auto; margin-bottom: 0; }
    #Footer .Copyright { padding: 10px 0; }
    #Footer .Copyright p { line-height: 30px; }
    #Footer .Copyright a { line-height: 30px; }
}

@media (max-width: 480px) {
    #Header .right .nav li a span { padding: 0 10px; }
    #Header .right .nav li a abbr { padding: 0 10px; }
    #Header .main .nav_down { padding: 5px 15px; }


    #Footer .main .boxM { padding: 20px 0; }
    #Footer .main .f-nav li { float: none; width: 100%; }
    #Footer .main .f-nav dt { margin: 0; line-height: 50px; font-size: 16px; border-bottom: 1px solid #1bafaf; background: url('../images/icon_jia.png') no-repeat right center; background-size: 30px; }
    #Footer .main .f-nav dd { padding: 0 20px; display: none; }
    #Footer .main .f-nav dd a { line-height: 50px; font-size: 16px; }
    #Footer .main .f-nav li.selected dt { background: url('../images/icon_jian.png') no-repeat right center; background-size: 30px; }
}


@media (max-width: 420px) {
    #Header .main .nav_down { padding: 5px 20px; }
    #Header .nav li #About-nav li { float: none; width: 100%; }
    #Header .nav li #About-nav .li-box { height: auto; }
    #Header .nav li .nav_down .li-box dd a { padding: 0 20px; }
    #Header .nav li .nav_down .li-box dt a { border-bottom: 1px solid #f0f0f0; }
    #Header .right .nav #product-nav li { float: none; width: 100%; }
    #Header .nav li .nav_down .li-box { }
    #Header .main .Down-li-row li a { border-bottom: 1px solid #f0f0f0; }
}


@media (max-width: 320px) {
}